<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100%;
        height: 3000px;
        background-image: linear-gradient(skyblue, pink);
      }
      .rocket {
        width: 148px;
        height: 250px;
        background-image: url(./rocket.png);
        display: none; /*初始设置为隐藏状态 */
        position: fixed;
        bottom: 0;
        right: 0;
      }
      .rocket:hover {
        background-position: -148px 0;
        cursor: pointer;
      }
      .active {
        animation: fire 0.4s infinite steps(4);
      }
      @keyframes fire {
        0% {
          background-position: -296px 0;
        }
        100% {
          background-position: -892px 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="rocket"></div>
    </div>
    <script>
      /*
      火箭飞出浏览器的路程 = 火箭的offsetTop+自身高度
      滚动条的路程 = scrollTop
      1s
      速度？-> 单位时间内移动的距离->step 20ms
      1s走完
      20ms移动一次
      总时间1000ms
      火箭的速度 V火 *20*50  = 火箭的路程
      20*50 总时间
      平均速度*时间 = 路程
      火箭的速度*20 = 火箭的路程/50
      */
      var rocket = document.querySelector('.rocket');
      var rocket_distance; //火箭的距离
      var bars_distance; //滚动条的距离
      var rocket_v; //火箭的速度
      var bars_v; //滚动条的速度
      var timer = null; //判断火箭是否在飞行状态
      rocket.onclick = function () {
        rocket.classList.add('active'); //点击后添加喷火样式
        rocket_distance = rocket.offsetTop + 250; //计算火箭需要飞行的距离
        bars_distance = document.documentElement.scrollTop; //获取滚动条的位置
        rocket_v = rocket_distance / 50; //计算火箭的速度
        bars_v = bars_distance / 50; //计算滚动条的速度
        //设置定时器
        timer = setInterval(function () {
          document.documentElement.scrollTop -= bars_v; //使页面滚动条向上滚动 bars_v 的距离
          rocket.style.top = rocket.offsetTop - rocket_v + 'px'; //火箭向上移动 rocket_v px
          if (document.documentElement.scrollTop === 0) {
            //如果滚动条已经移动到页面顶部
            clearInterval(timer); // 清除计时器
            timer = null; // 置空计时器
            rocket.style.top = ''; // 重置火箭 div 的位置
            rocket.classList.remove('active'); // 移除 active 类，停止火箭喷火动画
            rocket.style.display = 'none'; // 隐藏火箭
          }
        }, 20); // 每 20 毫秒执行一次函数
      };
      //火箭出现
      document.onscroll = function () {
        if (document.documentElement.scrollTop > 1200) {
          rocket.style.display = 'block';
        } else {
          rocket.style.display = 'none';
        }
        if (timer) {
          //火箭在飞，不能让他消失
          rocket.style.display = 'block';
        }
      };
    </script>
  </body>
</html>
